
//set popup Status
var popupStatus=0;
var markerArray = new Array();
var lengthArray = 0; //arraylength
var edit = 1;

function loadPopup(){  
 //loads popup only if it is disabled 
 if(popupStatus==0){  
 $("#backgroundPopup").css({"opacity": "0.7"});  
 $("#backgroundPopup").fadeIn("slow");  
 $("#popupContact").fadeIn("slow");  

 popupStatus = 1;  
 }  //if
}  //fn

function formPopup(n){  // Note this isn't the same as the display formPopup function
 //var edString = 'editor'+n;
 var imString = '<img src="'+ markerArray[n][6]+ '" width="' + markerArray[n][7] + '" height="' + markerArray[n][8] + '"/>';
 var xclose = '<a id="popupContactClose">x</a>';
 $("#popupTitle").html("edit window" + xclose); //the title bar
 //var fs1 = '<form action="incphp/save_marker.php" method="post" enctype="multipart/form-data" id="markerfm" >'; 
 // var cked = decode_json(markerArray[n][5]);
 var fs1 = '<form action="ed05.php" method="post" enctype="multipart/form-data" id="markerfm" >'; 
 var fs2 = '<input type="text" name="title" size="20" value="'+markerArray[n][4]+'"/><br />';
 var fs3 = '<textarea name="editor1" rows="4" cols="40">'+markerArray[n][5]+'</textarea><br />';
 //var fs3 = '<textarea name="editor1" rows="4" cols="40">'+cked+'</textarea><br />';
 var fs4 = '<input type="text" name="lnk" size="20" value="'+markerArray[n][9]+'"/><br />';
 var fs5 = '<button name="submit" type="submit" class="submitButton">Save</button><br />';
 var fs6 = '<input type="hidden" name="project_id" value="'+ Project +'" />';
 var fs7 = '<input type="hidden" name="marker_id" value="'+ markerArray[n][1] +'" />';
 var fs8 = '</form>';

		
 $("#contactArea").html(fs1 + fs2 + fs3 + fs4 + fs5 + fs6 + fs7 + fs8);  
 //$("#contactArea").html(imString + markerArray[n][5]); 
 $("#linkBar").html('<a href="javascript:newWindow(&quot;' + markerArray[n][10] + '&quot;)">More &rsaquo;&rsaquo;</a>'); 
}  //fn

 //disabling popup  
 function disablePopup(){  
 //disables popup only if it is enabled  
 if(popupStatus==1){  
  $("#backgroundPopup").fadeOut("slow");  
 $("#popupContact").fadeOut("slow");  
 popupStatus = 0;  
 CKEDITOR.instances.editor1.destroy(); // destroys the editor because if called again an error occurs
	 }  //if
 }  //fn

//centering popup  
function centerPopup(){  
 //request data for centering  
	var windowWidth = document.documentElement.clientWidth;  
	var windowHeight = document.documentElement.clientHeight;  
	var popupHeight = $("#popupContact").height();  
	var popupWidth = $("#popupContact").width();  
 //centering  
	 $("#popupContact").css({"position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2  });  
//only need force for IE6  
 
  $("#backgroundPopup").css({ "height": windowHeight });  
 }  //fn 

//positioning popup  
function positionPopup(t,l){  
 	//positioning  
	 $("#popupContact").css({"position": "absolute", "top": t, "left": l });  
 }  //fn

// function adds a marker, makes draggable and implements drag stop fn to update the array of markers
function addmarker(ident,x,y,icon_image, w, h) {//mkid is the database identifier for the marker
		var style = (' style="position:absolute; left:'+ x +'px;top:'+ y +'px;" ');
		var im = ('<img id="'+ident+'" class="mark" src="'+ icon_image +'" width="'+w+'" height="'+h+'"'+ style +' />');
		//$('#side_panel').append('<p id="' +ident+ '">'+ident+' ' + x +', '+ y + '<p/>');
		$('#map_canvas').append(im);
		// Make Draggable (edit mode)

} //fn

$(document).ready(function(){

//bg();
// gets json file with marker information and passes to an array
	var bg_image = myobj.background['fname'];
	var bg_width = myobj.bg_width['width']+'px';
	var bg_height = myobj.bg_height['height']+'px';
	var icon_image = myobj.markerIcon['fname'];
	var icon_width = myobj.iwidth['width']+'px';
	var icon_height = myobj.iheight['height']+'px';
	var bg_image_string = "url("+bg_image+")";
	var page_title = myobj.title.pagetitle;
	$("#header").html("<h1>" + page_title + "</h1>"); 
		$("#map_canvas").css({"background-image":bg_image_string});  
		$("#map_canvas").css({"height":bg_height});
		$("#container").css({"height":bg_height});
		$("#header").css({"width":bg_width});
		$("#nav").css({"width":bg_width});
		$("#map_canvas").css({"width":bg_width});
		$("#container").css({"width":bg_width});
		$("#footer").css({"width":bg_width});

// gets json file with marker information and passes to an array

	  $.each(myobj.markers.marker, function(i, item) { 
				var ident='mark'+i;
				var mkid= item.ident;
				var posx = item.posx;
				var posy = item.posy;
				//var icon = item.icon;
				var title = item.title;
				var txt = item.txt;
				var pic = item.pic;
				var width = item.width;
				var height = item.height;
				var lnk = item.lnk;
				//Note this is different from the display because of mkid the marker identifier 
				//this is required to save back to correct marker
				markerPoint = new Array(ident, mkid, posx, posy, title, txt, pic, width, height, lnk); //create marker element for array
				lengthArray = markerArray.push(markerPoint);//push onto array
				//console.log(ident, mkid, posx, posy, icon_image, icon_width, icon_height);
				addmarker(ident, posx, posy, icon_image, icon_width, icon_height);
				
		}); //.each

//Activate Popup (display mode)
	$('.mark').bind('click',function(ev){
		var id = $(this).attr("id");
		var n = id.slice(4);
		var position = $(this).position();
		var l = position.left;
		var t = position.top ;
		//centering with css 
		formPopup(n);
		//var edString = 'editor'+n;
		CKEDITOR.replace( 'editor1', //CK editor configuration
			{
			toolbar : 'Basic',
			uiColor : '#9AB8F3'
			});

		centerPopup(); 
		positionPopup(200,300);
		//load popup  
		loadPopup();  
	 }); //bind

//CLOSING POPUP  event handlers
 
   //Click the x event!  
   $("#popupTitle").click(function(){  //was #popupContactClose
   disablePopup();  
   });  

   //Click out event!  
	$("#backgroundPopup").click(function(){  
		disablePopup();  
	});  
   

}); //document ready